<template>
  <view class="detail-container">
    <!-- 加载状态 - 骨架屏 -->
    <view v-if="loading" class="skeleton-container">
      <!-- 家谱信息骨架屏 -->
      <view class="skeleton-header">
        <view class="skeleton-img">
          <view class="skeleton-image"></view>
          <view class="skeleton-jzname"></view>
        </view>
        <view class="skeleton-info">
          <view class="skeleton-text skeleton-title"></view>
          <view class="skeleton-text skeleton-meta"></view>
          <view class="skeleton-text skeleton-meta"></view>
          <view class="skeleton-text skeleton-meta"></view>
          <view class="skeleton-button"></view>
        </view>
      </view>
      <view class="skeleton-desc">
        <view class="skeleton-text skeleton-desc-title"></view>
        <view class="skeleton-text skeleton-desc-line"></view>
        <view class="skeleton-text skeleton-desc-line"></view>
        <view class="skeleton-text skeleton-desc-line"></view>
      </view>
    </view>

    <!-- 家谱信息展示 -->
    <view v-else-if="familyExists">
      <view class="header">
        <view class="imgBox">
          <image src="https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/17fd89bd09124f3a82e3c9a844543d90.png" class="cover-img" />
          <view class="jzName">{{ family.familyName }}</view>
        </view>
        <view class="info-block">
          <view class="family-title">{{ family.familyName }}</view>
          <view class="family-meta">发起人：{{ family.inheritor || "暂无" }}</view>
          <view class="family-meta">入谱人数：{{ family.count || "--" }}</view>
          <view class="family-meta">创建日期：{{ family.createTime }}</view>
          <button class="btn-success" style="margin: 24rpx 0 0 0" @click="navigateToDetail">
            查看家谱
          </button>
        </view>
      </view>
      <view style="height: 0; margin: 0; padding: 0"></view>
      <view class="desc-block">
        <ModuleList :familyId="family.id"></ModuleList>
      </view>
    </view>

    <!-- 空状态 - 没有家谱数据 -->
    <view v-else>
      <view class="no-family-message">
        <view class="book-cover">
          <view class="book-spine"></view>
          <view class="book-content">
            <view class="book-title">{{ family.familyName || "暂无家谱" }}</view>
            <view class="book-meta-group">
              <view class="book-meta">发起人：{{ family.inheritor || "暂无" }}</view>
              <view class="book-meta">入谱人数：{{ family.count || "--" }}</view>
              <view class="book-meta">创建日期：{{ family.createTime || "--" }}</view>
            </view>
            <view class="book-desc">{{ family.description || "暂无简介" }}</view>
          </view>
          <view v-if="getJoinButtonText(family) !== '审核中...'" class="action-button-group">
            <wd-button
              size="small"
              class="action-button"
              :type="getJoinButtonType(family)"
              :disabled="isJoinButtonDisabled(family)"
              @click="joinFamily"
            >
              {{ getJoinButtonText(family) }}
            </wd-button>
            <wd-button size="small" class="action-button" @click="createFamily">创建家谱</wd-button>
          </view>
          <view v-if="getJoinButtonText(family) === '审核中...'" class="pending-status-container">
            <wd-button size="small" class="pending-status-button" type="warning" disabled>
              审核中
            </wd-button>
            <view class="pending-status-desc">您的申请正在审核中，请耐心等待</view>
          </view>
        </view>
        <!-- 审核中状态按钮 -->
      </view>
    </view>
  </view>
</template>

<script>
import FamilyAPI from "@/api/genealogy/family";
import ModuleList from "./components/ModuleList.vue";
import { useUserStore } from "@/store/modules/user";
export default {
  name: "GenealogyDetail",
  components: {
    ModuleList,
  },
  data() {
    return {
      family: {},
      familyExists: true,
      actionButtonText: "加入家谱",
      isActionDisabled: false,
      loading: true, // 新增 loading 状态
    };
  },
  onLoad(query) {
    this.initUserInfo();
    this.getMyDetail();
  },
  methods: {
    initUserInfo() {
      const userStore = useUserStore();
      this.userMergerName = userStore.userInfo.mergerName; // 初始化用户mergerName
    },
    getMyDetail() {
      this.loading = true; // 开始加载
      FamilyAPI.getMyDetail({
        pageNum: 1,
        pageSize: 10,
      })
        .then((res) => {
          if (res.list && res.list.length > 0) {
            this.family = res.list[0];
            // 判断家谱是否已存在，依据 joinStatus 字段
            if (this.family.joinStatus === 1) {
              this.familyExists = true; // 已加入家谱
            } else {
              this.familyExists = false; // 未加入家谱
            }
            this.setActionButton();
          } else {
            this.familyExists = false; // 家谱不存在
            this.setActionButton();
          }
          this.loading = false; // 结束加载
        })
        .catch(() => {
          this.loading = false; // 结束加载
        });
    },
    setActionButton() {
      // 0: 未加入 1: 审核中 2: 被拒绝 3: 已加入
      const status = this.family.joinStatus;
      if (status === 1 || status === undefined) {
        this.actionButtonText = "加入家谱";
        this.isActionDisabled = false;
      } else if (status === 0) {
        this.actionButtonText = "审核中...";
        this.isActionDisabled = true;
      } else if (status === 2) {
        this.actionButtonText = "被拒绝";
        this.isActionDisabled = false; // 被拒绝状态也可以点击
      } else if (status === 3) {
        this.actionButtonText = "已加入";
        this.isActionDisabled = true;
      } else {
        this.actionButtonText = "加入家谱";
        this.isActionDisabled = false;
      }
    },
    navigateToDetail() {
      uni.navigateTo({
        url: `/pages/genealogy/person/index`,
      });
    },
    createFamily() {
      // 跳转到创建家谱页面，传递参数标识从详情页面跳转并显示创建表单
      uni.navigateTo({
        url: `/pages/genealogy/index?fromDetail=true&showCreateForm=true`,
      });
    },
    joinFamily() {
      const buttonText = this.getJoinButtonText(this.family);

      if (buttonText === "查看家谱") {
        // 查看家谱
        uni.navigateTo({
          url: `/pages/genealogy/person/index`,
        });
      } else if (buttonText === "被拒绝") {
        // 被拒绝状态，重新申请加入
        uni.navigateTo({
          url: `/pages/genealogy/index?fromDetail=true&reapply=true`,
        });
      } else if (buttonText === "审核中...") {
        // 审核中状态，显示提示信息
        uni.showModal({
          title: "申请审核中",
          content: "您的加入申请正在审核中，请耐心等待。",
          showCancel: false,
          confirmText: "知道了",
        });
      } else {
        // 加入家谱
        uni.navigateTo({
          url: `/pages/genealogy/index?fromDetail=true&city=${this.userMergerName}`,
        });
      }
    },
    getJoinButtonText(row) {
      if (!row) row = this.family;
      if (row.hasJoined === 1) {
        if (row.activedStatus === 1) return "查看家谱";
        if (row.joinStatus === 1) return "等待入谱";
        if (row.joinStatus === 0) return "审核中...";
        if (row.joinStatus === 2) return "被拒绝";
        return "";
      } else {
        if (row.activedStatus === 1) return "查看家谱";
        if (row.joinStatus === 1) return "等待入谱";
        if (row.joinStatus === 0) return "审核中...";
        if (row.joinStatus === 2) return "被拒绝";
        return "申请加入";
      }
    },
    getJoinButtonType(row) {
      if (!row) row = this.family;
      if (row.activedStatus === 1) return "success";
      if (row.joinStatus === 1) return "info";
      if (row.joinStatus === 0) return "warning";
      if (row.joinStatus === 2) return "danger";
      return "primary";
    },
    isJoinButtonDisabled(row) {
      const text = this.getJoinButtonText(row);
      // 只有"加入家谱""查看家谱""被拒绝""审核中..."可点击，其它禁用
      return !["申请加入", "查看家谱", "被拒绝", "审核中..."].includes(text);
    },
    // 判断页面是否展示创建家谱按钮条件1: 我的家谱不存
  },
};
</script>

<style scoped>
.action-button-group {
  width: 13rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  position: absolute;
  bottom: 10px;
  z-index: 10;
}
.imgBox {
  position: relative;
}
.jzName {
  position: absolute;
  left: 0.4rem;
  top: 1.7rem;
  width: 0.58rem;
  height: 2.3rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  overflow: hidden;
  white-space: pre-line;
  font-size: 0.4rem;
  overflow-y: hidden;
  font-weight: bold;
  text-align: center;
}
.detail-container {
  /* background: #f5e9da; */
  height: 100%;
  padding: 40rpx 0 0 0;
}

.header {
  display: flex;
  background: #fff;
  border-radius: 24rpx;
  margin: 40rpx 30rpx 20rpx 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(191, 163, 107, 0.1);
  padding: 30rpx 20rpx;
  align-items: center;
}

.cover-img {
  width: 180rpx;
  height: 220rpx;
  border-radius: 12rpx;
  object-fit: cover;
  background: #f5e9da;
  margin-right: 30rpx;
}

.info-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.family-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.family-meta {
  font-size: 26rpx;
  color: #666;
}

.apply-btn {
  background: #e95d2a;
  color: #fff;
  border-radius: 12rpx;
  font-size: 26rpx;
  font-weight: bold;
  padding: 10rpx 36rpx;
  margin: 14rpx 0 0 0;
  box-shadow: 0 2rpx 8rpx rgba(233, 93, 42, 0.1);
  display: inline-block;
  letter-spacing: 2rpx;
  min-width: 120rpx;
  height: 44rpx;
  line-height: 22rpx;
  width: auto;
  /* 新增，让宽度自适应内容 */
}

.btn-success {
  background: #67c23a;
  color: #fff;
}

.btn-info {
  background: #909399;
  color: #fff;
}

.btn-warning {
  background: #e6a23c;
  color: #fff;
}

.btn-danger {
  background: #f56c6c;
  color: #fff;
}

.desc-block {
  background: #fff;
  border-radius: 20rpx;
  margin: 30rpx 30rpx 0 30rpx;
  padding: 30rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(191, 163, 107, 0.08);
}

.desc-title {
  font-size: 28rpx;
  color: #bfa36b;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.desc-content {
  font-size: 26rpx;
  color: #444;
  line-height: 1.7;
}

.section-block {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #eee;
}

.section-title {
  font-size: 28rpx;
  color: #bfa36b;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.section-content {
  font-size: 26rpx;
  color: #444;
  line-height: 1.7;
  text-align: justify;
  text-indent: 2em;
}

.no-family-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

.action-button {
  background: #e95d2a; /* 按钮背景色 */
  color: #fff; /* 按钮文字颜色 */
  border-radius: 12rpx; /* 按钮圆角 */
  font-size: 26rpx; /* 按钮字体大小 */
  font-weight: bold; /* 按钮字体加粗 */
  padding: 10rpx 36rpx; /* 按钮内边距 */
  margin: 10rpx 0; /* 按钮上下间距 */
  box-shadow: 0 2rpx 8rpx rgba(233, 93, 42, 0.1); /* 按钮阴影 */
  width: 200rpx; /* 按钮宽度 */
  text-align: center; /* 按钮文字居中 */
}

.pending-status-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
  padding: 20rpx 0;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(191, 163, 107, 0.08);
  position: absolute;
  bottom: 4px;
}

.pending-status-button {
  background: #e6a23c;
  color: #fff;
  border-radius: 12rpx;
  font-size: 26rpx;
  font-weight: bold;
  padding: 10rpx 36rpx;
  margin: 10rpx 0;
  box-shadow: 0 2rpx 8rpx rgba(230, 162, 60, 0.1);
  width: 200rpx;
  text-align: center;
}

.pending-status-desc {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
  text-align: center;
}

.book-cover {
  width: 14rem;
  height: 19rem;
  background:
    repeating-linear-gradient(135deg, rgba(200, 190, 170, 0.08) 0 2px, transparent 2px 12px),
    linear-gradient(135deg, #f3f3f3 80%, #e0d6c3 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 8px);
  border-radius: 18rpx;
  box-shadow:
    0 8rpx 32rpx rgba(191, 163, 107, 0.13),
    0 2rpx 8rpx #e0d6c3;
  position: relative;
  margin-bottom: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.book-spine {
  position: absolute;
  left: 0;
  top: 0;
  width: 18rpx;
  height: 100%;
  background: linear-gradient(90deg, #d1c3a3 60%, #e0d6c3 100%);
  border-top-left-radius: 18rpx;
  border-bottom-left-radius: 18rpx;
  box-shadow: 2rpx 0 8rpx #e0d6c3;
  z-index: 1;
}
.book-content {
  position: relative;
  z-index: 2;
  width: 92%;
  height: 92%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.2rem 1.2rem 1.2rem 2.2rem;
  box-sizing: border-box;
  background: transparent;
}
.book-title {
  font-size: 1.5rem;
  color: #bfa36b;
  font-weight: bold;
  letter-spacing: 2rpx;
  text-align: left;
  margin-bottom: 1.2rem;
  user-select: none;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.book-meta-group {
  width: 100%;
  margin-bottom: 1.2rem;
}
.book-meta {
  font-size: 0.8rem;
  color: #8c7b5a;
  margin-bottom: 0.3rem;
  text-align: left;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-desc {
  font-size: 0.8rem;
  color: #a89c7a;
  margin-top: 0.5rem;
  text-align: left;
  width: 100%;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  background: transparent;
}

/* 骨架屏样式 */
.skeleton-container {
  padding: 40rpx 0 0 0;
}

.skeleton-header {
  display: flex;
  background: #fff;
  border-radius: 24rpx;
  margin: 40rpx 30rpx 20rpx 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(191, 163, 107, 0.1);
  padding: 30rpx 20rpx;
  align-items: center;
}

.skeleton-img {
  position: relative;
  margin-right: 30rpx;
}

.skeleton-image {
  width: 180rpx;
  height: 220rpx;
  border-radius: 12rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

.skeleton-jzname {
  position: absolute;
  left: 0.4rem;
  top: 1.7rem;
  width: 0.58rem;
  height: 2.3rem;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

.skeleton-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.skeleton-text {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4rpx;
}

.skeleton-title {
  width: 200rpx;
  height: 36rpx;
}

.skeleton-meta {
  width: 150rpx;
  height: 26rpx;
}

.skeleton-button {
  width: 120rpx;
  height: 44rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 12rpx;
  margin-top: 24rpx;
}

.skeleton-desc {
  background: #fff;
  border-radius: 20rpx;
  margin: 30rpx 30rpx 0 30rpx;
  padding: 30rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(191, 163, 107, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.skeleton-desc-title {
  width: 100rpx;
  height: 28rpx;
}

.skeleton-desc-line {
  width: 100%;
  height: 26rpx;
}

.skeleton-desc-line:nth-child(2) {
  width: 100%;
}

.skeleton-desc-line:nth-child(3) {
  width: 80%;
}

.skeleton-desc-line:nth-child(4) {
  width: 60%;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
</style>
